<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>{$reply['title']}</title>
{php echo register_jssdk(false);}
<link type="text/css" rel="stylesheet" href="{MODULE_URL}template/mobile/css/style.css?{timestamp}"/>
<link type="text/css" rel="stylesheet" href="{MODULE_URL}template/mobile/js/sweetalert.css"/>
<script src="{MODULE_URL}template/mobile/js/jquery-2.1.1.min.js"></script>
<script src="{MODULE_URL}template/mobile/js/sweetalert.min.js"></script>
<script src="{MODULE_URL}template/mobile/js/jquery-2.1.1.min.js?{timestamp}"></script>
<script>
wx.ready(function () {
	wx.hideOptionMenu();
	wx.onMenuShareAppMessage({
	  title: "{php echo $reply['title']}",
	  desc: "{php echo $share_des}",
	  link: "{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileurl('share',array('rid' => $rid,'fid'=>$fid)))}",
	  imgUrl: "{php echo $_W['attachurl'].$reply['thumb_share']}",
	  trigger: function (res) {
	  //  alert('用户点击发送给朋友');
	  },
	  success: function (res) {
	   // alert('已分享1');
	  },
	  cancel: function (res) {
	   // alert('已取消');
	  },
	  fail: function (res) {
	   // alert(JSON.stringify(res));
	  }
	});
	
	 wx.onMenuShareTimeline({
	  title: "{php echo $share_des}",
	  desc: "{php echo $reply['headtitle']}",
	  link: "{php echo $_W['siteroot'].str_replace('./','app/',$this->createMobileurl('share',array('rid' => $rid,'fid'=>$fid)))}",
	  imgUrl: "{php echo $_W['attachurl'].$reply['thumb_share']}",
		
	  trigger: function (res) {
		//alert('用户点击分享到朋友圈');
	  },
	  success: function (res) {
	   // alert('已分享');
	  },
	  cancel: function (res) {
	   // alert('已取消');
	  },
	  fail: function (res) {
	   // alert(JSON.stringify(res));
	  }
	});
});
</script>
<style>
.i-header {position: relative;margin-bottom:10px;z-index:2}
.i-nodes {
	width: 300px !important;
}
.i-rule-right {position:absolute;bottom:10px;right:10px;background:#ff0;color:#F00;padding:3px 5px;border-radius:5px;font-size:12px;z-index:4}
.i-rule-left{position:absolute;bottom:10px;left:10px;background:#ff0;color:#F00;padding:3px 5px;border-radius:5px;font-size:12px;z-index:5}
</style>
</head>
<body>
<article id="page-index">
  <header id="i-header" class="i-header">
  <img src="{php echo $_W['attachurl'].$reply['thumb_top']}" style="width:100%;"/>
  <a href="{php echo $this->createMobileUrl('rank',array('rid' => $rid));}"><span class="i-rule-left">&nbsp;排行榜&nbsp;</span></a>
  <span id="i-rule" class="i-rule-right">游戏规则</span> </header>
  <!-- 基本信息-->
   <p align="center">{$reply['ad']}</p>
  <div id="nodesdiv">
 
    <ul id="i-nodes" class="i-nodes" style="display: block; height: 62px; ">
      <?php $count=count($geili);
			$left = 103;
			$top = -63;
			$flag = -1;
			$margin = 0;
			$all = 0;
			
	         for($i=0;$i<$count;$i++){
				if($i% 3 == 0){
				
				 if(($i+1)%2 == 0){
                        $left = 251;
						
                    }else{
                        $left = 103;
                    }
					
                    $flag ++;
                    $top+=70;
					$margin+=60;
                }
				if($i >= $flag*3 && i <= $flag*3+2){ ?>
      <li style="top: {$top}px; left: {$left}px; ">
        <?php if($i%6==0 || ($i+1)%6 == 0){echo '';}else{echo '<section class="i-node-1"></section>';}?>
        <span><img src="{$geili[$i]['headimgurl']}"></span>
        <?php if($i%3==0 && $i != 0){if(($i+1)%2 == 0){echo '<section class="i-node-4"></section>';}else{echo '<section class="i-node-8"></section>';}} ?>
        <p> {$geili[$i]['distance']}m </p>
        <?php $all = $flag;?>
      </li>
      <?php  
                    (($flag+1)%2 ==0) ? $left-=70 : $left+=70;
                }  ?>
      <?php}?>
      <?php if($all % 2 == 0){?>
      <li style="top:{$top}px;left:{$left}px;">
        <section style="left: inherit;left: -38px;" class="i-node-1"></section>
        <i style="position: absolute;top: 0;left: px;background: url({php echo $_W['attachurl'].$reply['thumb_end']});background-size:100% 100%;" class="huafei"></i></li>
      <?php}else{?>
      <li style="top: {$top}px;left: {$left}px;">
        <section style="left: inherit;right: -38px;" class="i-node-1"></section>
        <i style="position: absolute;top: 0;left: 12px;background: url({php echo $_W['attachurl'].$reply['thumb_end']});background-size:100% 100%;" class="huafei"></i></li>
      <?php}?>
      <style>
#nodesdiv{width: 300px;position: relative;left: 10px;overflow: hidden;height: <?php echo ($flag+1)*52+(30*($flag+1)) ?>px;}
</style>
    </ul>
  </div>
  <div class="i-race">
    {if !empty($member)}
    <p id="i-owner" style="display: black;"> <strong>{$member['nickname']}</strong>的跑道： </p>
    <p id="i-stat-remain-owner" class="i-stat" style="display: black "> 已跑 <span class="i-total" id="i-totalxx">{$sum}</span>米，
    {if $reply['gametype']==0}
    	游戏结束后，奖励前{$reply['ranking']}名哦
    {else}
      {if ($gift['need']-$sum>=0)}
      距离领取{$gift['desc']}还有<span class="i-remain">{php echo $gift['need']-$sum}</span>米
      {else}
      已可以领取{$gift['desc']}
      {/if}
    {/if}
    </p>
    {/if}
  </div>
  <div id="i-notice-bind"></div>
  <div id="i-end">&nbsp;</div>
  <div class="i-start-panel"> 
    {if !empty($member)}
      <span><button id="i-relay" class="i-button i-btn-animate" style="display: black;">帮Ta接力</button></span>
    {/if}
    {if !empty($self)} 
    <span><button id="i-back" class="i-button" style="display: black;">我也要玩</button></span>
    {else}
    <span><button id="i-self" class="i-button" style="display: black;">我也要玩</button></span> 
    {/if}
     </div>
  <div id="i-notice-others" class="i-notice"> </div>
  <div id="i-notice-uc" class="i-notice" style="display: block; "> </div>
  <div id="i-notice-download" class="i-notice"> </div>
  <div id="i-notice-download-close"> × </div>
  <section id="i-ranking" style="display: block; ">
    <div class="i-title-rank"> 基情榜 </div>
    <ul id="i-records" class="i-friend-rank">
      <?php for($i=0;$i<$count;$i++){ ?>
      {if $geili[$i]['distance']!=0}
      <li>
        <div class="box">
          <div> <img src="{$geili[$i]['headimgurl']}"/> </div>
          <div>
            <p>{$geili[$i]['nickname']}</p>
            <?php if($i==0){ ?>
            <p><small> 自己跑了{$geili[$i]['distance']}m</small></p>
            <?php }else{ ?>
            <p><small> 帮{$ren}跑了{$geili[$i]['distance']}m</small></p>
            <?php } ?>
          </div>
          <em>{php echo date('Y-m-d H:i', $geili[$i]['time'])}</em>
          <section style="clear:both;"></section>
        </div>
        <p> </p>
      </li>
      {/if}
      <?php}?>
    </ul>
  </section>
  <div id="timelineGuid" onclick="this.style.display='none'" style="display: none;position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2000; background: rgba(0, 0, 0, 0.701961);"> <img src="../addons/j_run/template/mobile/img/guide.png" style="position: fixed; right: 18px; top: 5px; width: 260px; height: 180px; z-index: 2001;"> </div>
  {template 'ad'}
</article>

<div id="rulebox" style="display:none;">
	<div class="rulebody">{php echo str_replace(array("\r\n", "\r", "\n"), "<br>", $reply["rule"])}</div>
    <div class="rulefoot"><button type="button" class="i-button" onClick="closeRule();">关闭</button></div>
</div>
<div id="markser"></div>
<style>
#markser{ width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; z-index:9; display:none;}
#rulebox{ width:90%; background:#FFF; border-radius:8px; padding:10px; position:fixed; top:10px; bottom:10px; z-index:10;}
.rulebody{ overflow-y:scroll;}
.rulefoot{ padding:5px; text-align:center;height:30px;}
.rulefoot button{}
</style>

<script>
$(function(){
	if($('body').width() <= 320){
		$('#nodesdiv').css({left:'15px'})
	}
	$('#i-start').bind('click',function(){
		window.location.href = "{php echo $this->createMobileUrl('Game',array('rid' => $rid,'uid'=>$fans['id'],'fid'=>$fid))}";
	})
	$('#i-invite').bind('click',function(){
		$("#timelineGuid").show();
	})
	$('#i-relay').bind('click',function(){
		window.location.href = "{php echo $this->createMobileUrl('Game',array('rid' => $rid,'uid'=>$fans['id'],'fid'=>$fid))}";
	})
	$('#i-back').bind('click',function(){
	   window.location.href = "{php echo $this->createMobileUrl('index',array('rid' => $rid,'add'=>'1'))}";
	})
	$('#i-self').bind('click',function(){
		window.location.href = "{php echo $this->createMobileUrl('index',array('rid' => $rid,'add'=>'1'))}";
	})
	$('#i-rule').bind('click',function(){
		showrule();
	})
})
function closeRule(){
	$("#rulebox").hide();
	$("#markser").hide();
}
function showrule(){
	var _h=document.documentElement.clientHeight -60;
	var _w=document.documentElement.clientWidth *0.90;
	var _left=document.documentElement.clientWidth *0.05;
	$("#rulebox").css({'width':_w,'height':_h,'left':_left}).show();
	
	$(".rulebody").css("height",_h-60);
	var _hd=$(document).height();
	$("#markser").css({'width':_w,'height':_hd,'top':0,'left':0,'bottom':0}).show();
	/*swal({
		title:"活动规则",
		text:'<article id="rulebox" style="display:block;text-align:left;width:'+_w+'px;height:'+_h+'px;overflow-y:scroll;">{php echo str_replace(array("\r\n", "\r", "\n"), "<br>", $reply["rule"])}</article>',
		html: true
	})
	$("#rulebox").width(_w);*/
}
</script>
</body>
</html>